<template>
  <div id="main">
    <div class="store-content item">
      <div class="item-box">
        <div class="gallery-wrapper">
          <div class="gallery">
            <div class="thumbnail">
              <ul>
                <li 
                  v-for="(item,index) in itemData.stock_info[m].imgs" 
                  :key="index" 
                  :class="n==index?'on':''" 
                  @click="n=index"
                >
                  <img :src="item" />
                </li>
              </ul>
            </div>
            <div class="thumb">
              <ul>
                <li class="on">
                  <img :src="itemData.stock_info[m].imgs[n]" />
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="banner">
          <div class="sku-custom-title">
            <div class="params-price">
              <span><em>¥</em><i>{{itemData.stock_info[m].price}}</i></span>
            </div>
            <div class="params-info">
              <h4>{{itemData.stock_info[m].title}}</h4>
              <h6>{{itemData.stock_info[m].sub_title}}</h6>
            </div>
          </div>
          <div class="sku-dynamic-params-panel">
            <div class="sku-dynamic-params clear">
              <span class="params-name">颜色</span>
              <ul class="params-colors">
                <li 
                  v-for="(dot,dotidx) in itemData.stock_info" 
                  :key="dotidx"
                  @click="m=dotidx" 
                  :class="m==dotidx?'cur':''"
                >
                  <a :style="{background:dot.detail.color}">
                    <i></i>
                  </a>
                </li>
              </ul>
            </div>
            <div class="sku-dynamic-params clear">
              <div class="params-name">数量</div>
              <div class="params-detail clear">
                <div class="item-num js-select-quantity">
                  <span class="down down-disabled">-</span>
                  <span class="num">1</span>
                  <span class="up up-disabled">+</span>
                </div>
              </div>
            </div>
          </div>
          <div class="sku-status">
            <div class="cart-operation-wrapper clearfix">
              <span class="blue-title-btn js-add-cart"><a>加入购物车</a></span>
              <span class="gray-title-btn"><a>现在购买</a></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import request from '../utils/request'
import { getGoods } from "../api/goods";
export default {
  data() {
    return {
      itemData: null,
      m:0,  //标记子商品序号
      n:0  //标记缩略图序号
    }
  },
  created() {
    console.log(this.$route);
    // let id = this.$route.params.id
    let { id } = this.$route.params;
    // 方法1:
    // request.get(`/list?id=${id}`).then(res=>{
    //   console.log(res);
    // })
    // 方法2:
    getGoods(id).then((res) => {
      console.log(res);
      this.itemData = res.data[0]
    });
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/css/item.css");
.thumbnail li img,
.thumb li img{
  width: 100%;
  height: 100%;
}
</style>
